<template>
  <div class="Test">
    <template v-if="type === 0">
      <div class="title">
        {{info.chapterName}}
      </div>
      <div class="desc-box">
        <div class="tip">
          测验
        </div>
        <div class="num">
          数量： {{info.subjectNum}}
        </div>
      </div>
      <div class="line"></div>
      <CompleteList :resourceLessonChapterId="resourceLessonChapterId" :list="info.finishedList" :size="Number(info.finishedSize)" />
      <StartBox :info="info" v-if="info.testStatus === '0' || info.testStatus === '1'" @startTest="startTest" />
      <CompleteBox :info="info" :resourceLessonChapterId="resourceLessonChapterId" v-else-if="info.testStatus === '2'" @startTest="startTest" @getReport="getReport" />
    </template>
    <template v-else-if="type === 1">
      <questionsList :questionsInfo="questionsInfo" :testDuration="info.testDuration" @getReport="getReport"  />
    </template>
    <!-- 答题报告  -->
    <template v-else-if="type === 2">
      <div class="title">
        {{info.chapterName}}
      </div>
      <div class="desc-box">
        <div class="tip">
          测验
        </div>
        <div class="num">
          数量： {{info.subjectNum}}
        </div>
      </div>
      <div class="report-box">
        <div class="report-title">学习情况</div>
        <!-- <div class="report-desc">完成时间：{{reportInfo.}}</div> -->
        <CircleProgress :circelData="circelData" />
      </div>
      <div class="report-detail">
        <div class="report-title">答题情况</div>
        <div class="report-desc">点击可以查看解析哦</div>
        <div class="card-list">
          <div :class="`card-li ${item.rightFlag === 0 ? 'active' : ''}`" v-for="item in reportInfo.subjectList" :key="item.sortIndex" @click="toAnalyse(item.subjectId)">
            {{item.sortIndex}}
          </div>
        </div>
      </div>
    </template>
    <!-- 答题解析  -->
    <template v-else-if="type === 3">
      <Analyse :info="analyseInfo" :resourceLessonChapterId="resourceLessonChapterId" @changeType="changeType"/>
    </template>
  </div>
</template>

<script>
import CompleteList from '@/views/student/components/CompleteList'

import CompleteBox from '@/views/student/components/test/CompleteBox'
import StartBox from '@/views/student/components/test/StartBox'
import questionsList from '@/views/student/components/test/questionsList'
import CircleProgress from '../CircleProgress'
import Analyse from '@/views/student/components/test/Analyse'
import {
  testMain,
  enterTest,
  updateTestDuration,
  testReport,
  answerAnalyse
} from '@/api/student/lesson/study'
export default {
  name: 'Test',
  components: {
    CircleProgress,
    CompleteList,
    StartBox,
    CompleteBox,
    questionsList,
    Analyse
  },
  props: {
    resourceLessonChapterId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      circelData: [
        {
          name: '时长',
          text: '',
          percentage: 45

          // status有三种形式
          // warning 黄色 success 绿色
        },
        {
          name: '得分',
          text: '',
          percentage: 45,
          // status有三种形式
          // warning 黄色 success 绿色
          status: 'success'
        },
        {
          name: '排名',
          text: '',
          percentage: 45,
          // status有三种形式
          // warning 黄色 success 绿色
          status: 'warning'
        }
      ],
      type: 0, // 0-未开始测验 1-开始测验 2-答题报告
      info: {},
      questionsInfo: {}, // 题目列表
      reportInfo: {}, // 报告信息
      analyseInfo: {} // 解析信息
    }
  },
  watch: {
    resourceLessonChapterId () {
      this.getTestMain()
    }
  },
  mounted () {
    this.getTestMain()
  },
  methods: {
    async getTestMain () {
      const res = await testMain({
        resourceLessonChapterId: this.resourceLessonChapterId
      })
      if (res.code === '200') {
        this.info = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    async startTest () {
      this.type = 1
      const res = await enterTest({
        resourceLessonChapterId: this.resourceLessonChapterId
      })
      if (res.code === '200') {
        this.questionsInfo = res.data
        this.updateTestDurationStart()
      } else {
        this.$message.error(res.message)
      }
    },
    updateTestDuration () {
      updateTestDuration({
        testBatchId: this.questionsInfo.testBatchId
      })
    },
    updateTestDurationStart () {
      clearInterval(this.timer)
      this.timer = null
      this.timer = setInterval(() => {
        this.updateTestDuration()
      }, 8000)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer)
        this.timer = null
      })
    },
    // 获取报告
    async getReport (testBatchId) {
      const res = await testReport({
        testBatchId
      })
      if (res.code === '200') {
        this.reportInfo = res.data
        this.type = 2
        this.drawCircel()
      } else {
        this.$message.error(res.message)
      }
    },
    drawCircel () {
      this.circelData[0].text = this.reportInfo.testDuration
      this.circelData[1].text = this.reportInfo.score
      this.circelData[2].text = this.reportInfo.rank
    },
    // 查看解析
    async toAnalyse (subjectId) {
      const res = await answerAnalyse({
        subjectId,
        id: this.info.testBatchId
      })
      if (res.code === '200') {
        this.analyseInfo = res.data
        this.type = 3
      } else {
        this.$message.error(res.message)
      }
    },
    changeType (type) {
      this.type = type
    }
  }
}
</script>

<style lang="scss" scoped>
.Test {
  width: 728px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  padding: 0 20px;
  .title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(16, 29, 55, 1);
  }
  .desc-box {
    height: 26px;
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    .tip {
      width: 55px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      background: rgba(243, 255, 249, 1);
      border-radius: 5px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(31, 191, 91, 1);
    }
    .num {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(16, 29, 55, 1);
      margin-left: 13px;
    }
  }
  .report-box {
    border-top: 1px solid rgba(245, 245, 246, 1);
    border-bottom: 1px solid rgba(245, 245, 246, 1);
    padding: 20px 0;
    .report-title {
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(16, 29, 55, 1);
    }
    .report-desc {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(16, 29, 55, 1);
      line-height: 52px;
    }
  }
  .report-detail {
    .report-title {
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(16, 29, 55, 1);
      line-height: 52px;
    }
    .report-desc {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(16, 29, 55, 1);
      line-height: 52px;
    }
    .card-list {
      display: flex;
      flex-wrap: wrap;
      .card-li {
        cursor: pointer;
        width: 38px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        background: #04cb74;
        border-radius: 50%;
        margin-right: 20px;
        margin-bottom: 20px;
        font-size: 19px;
        color: #fff;
        &.active {
          background: red;
        }
      }
    }
  }
}
</style>
